// TODO: 手写简易的ajax 参考下面的 Promise + XMLHttpRequest 的实现
// const xhr = new XMLHttpRequest()
// xhr.open('GET', '/data/test.json', true); // true 表示异步
    // 假设是post -> xhr.open('POST', '/login', true);
// xhr.onreadystatechange = function () {
//     if (xhr.readyState === 4) {
//         if (xhr.status === 200) {
//             // console.log(
//             //     JSON.parse(xhr.responseText)
//             // )
//             alert(xhr.responseText)
//         } else if (xhr.status === 404) {
//             console.log('404 not found')
//         }
//     }
// }
    // 假设是post
    // xhr.send(JSON.stringify({ name: 'test', psw: '123' }));
// xhr.send(null)


// TODO: 状态码
    // 2xx: 表示成功处理请求, 如 200
    // 3xx: 需要重定向, 浏览器直接跳转, 如 301(永久重定向), 302(临时重定向), 304(资源未改变, 缓存)
    // 4xx: 客户端请求错误, 如 404, 403(没权限)
    // 5xx: 服务端错误, 如 500


// TODO: 跨域
// 什么是跨域
    // ajax 请求时, 浏览器要求当前网页和 server 必须同源(协议 域名 端口 三者必须一致)
    // 如 -> 前端: http://a.com:8080/ 去发 ajax 到server: https://b.com/api/xxx, 属于跨域
    // 加载图片, css, js 可无视同源策略
        // <img src="" /> 可用于统计打点
        // <link href="" /> 可使用CDN
        // <script src=""></script> 可实现JSONP
    // 所有的跨域, 都必须经过 server 端允许和配合
// TODO: JSONP
    // script 跨域绕过跨域
    // 服务端可以任意动态拼接数据返回
    // 所以 script 就可以获取跨域数据, 只要服务端愿意返回
// TODO: CORS (纯服务端去做)
    // 服务器设置 http header
    // response.setHeader("Access-Control-Allow-Origin": "http://localhost:9001")
    // response.setHeader("Access-Control-Allow-Headers": "X-Requested-With")
    // response.setHeader("Access-Control-Allow-Methods": "PUT,POST,GET")
    // response.setHeader("Access-Control-Allow-Credentials": "true") // 接收跨域的cookie
// TODO: Nginx 反向代理
// 以代理服务器来接受客户端的连接请求, 然后将请求转发给服务器, 将服务器上得到的结果返回给请求连接的客户端
// TODO: 正向代理和反向代理的区别
    // 1. 正向代理是客户端的代理, 帮助客户端访问其无法访问的服务器资源(解决访问限制问题); 反向代理则是服务器的代理, 帮助服务器做负载均衡, 安全防护等
    // 2. 正向代理中, 服务器不知道真正的客户端到底是谁, 以为访问自己的就是真实的客户端; 而在反向代理中, 客户端不知道真正的服务器是谁, 以为自己访问的就是真实的服务器


// TODO:
function ajax(url) {
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(
                        JSON.parse(xhr.responseText)
                    )
                } else if (xhr.status === 404 || xhr.status === 500) {
                    reject(new Error('404 not found'))
                }
            }
        }
        xhr.send(null)
    })
    return p
}

const url = '/data/test.json'
ajax(url)
.then(res => console.log(res))
.catch(err => console.error(err))
